<template>
  <div class="subPageMain" style="background: none">
    <div class="noticeDetail_detail">
      <div class="noticeDetail_head">{{row.title}}</div>
      <div class="noticeDetail_main">
        <div v-html="row.content" />
      </div>
    </div>
    <div class="editContainer">
      <div class="edit_headTitle">回复</div>
      <div class="edit_main">
        <div class="replyEdit">
          <div id="quillEditorQiniu">
          <el-upload
            class="avatar-uploader"
            :action="uploadImgUrl"
            :accept="'image/*,video/*'"
            :show-file-list="false"
            :on-success="uploadEditorSuccess"
            :on-error="uploadEditorError"
            :before-upload="beforeEditorUpload"
            :headers="headers"
          ></el-upload>
          <quill-editor
            ref="myQuillEditor"
            v-model="form.content"
            :options="editorOption"
            class="my-quill-editor"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
          />
          </div>
        </div>
        <div class="replyEditBtnGroup">
          <div class="replyBtn">
            <el-button type="primary" @click="submitFun">提 交</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import {addUserJobDetails} from "@/api/job";
import { getToken } from "@/utils/auth";
export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/upload/image",
      row: {},
      form: {
        content: "",
      },
      visible: this.value,
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"],
              ["blockquote", "code-block"],
              [{ list: "ordered" }, { list: "bullet" }],
              [{ indent: "-1" }, { indent: "+1" }],
              [{ color: [] }, { background: [] }],
              ["image"],
              ["clean"],
            ],
            handlers: {
              image: function (value) {
                if (value) {
                  document
                    .querySelector("#quillEditorQiniu .avatar-uploader input")
                    .click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
        placeholder: "请输入正文",
      },
    };
  },
  created() {
    this.row = this.$route.query.row;
  },
  methods: {
    //上传图片之前async
    beforeEditorUpload(res, file) {
      //显示上传动画
      this.quillUpdateImg = true;
      //  const res1 = await uploadImage()
      // this.$emit('before',res, file)
      console.log(res);
      console.log(file);
    },
    // 上传(文件)图片失败
    uploadEditorError(res, file) {
      //页面提示
      this.$message.error("上传图片失败");
      //取消上传动画
      this.quillUpdateImg = false;
    },
    // 上传图片成功
    uploadEditorSuccess(res, file) {
      // //拼接出上传的图片在服务器的完整地址
      let url = res.data;
      let type = url.substring(url.lastIndexOf(".") + 1);
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片||视频  res.info为服务器返回的图片地址
      if (type == "mp4" || type == "MP4") {
        window.jsValue = url;
        quill.insertEmbed(length, "video", url);
      } else {
        quill.insertEmbed(length, "image", url);
      }
      // 调整光标到最后
      quill.setSelection(length + 1);
      //取消上传动画
      this.quillUpdateImg = false;
    },
    submitFun(){
        const data = {content: this.form.content, jobId: this.row.id};
        addUserJobDetails(data).then(res => {
            if(res.code){
                this.$router.push({ name: 'student-job'})
                this.$message({
                    message: '回答成功',
                    type: 'success'
                });
            }else{
                this.$message({
                    message: res.msg,
                    type: 'error'
                });
            }
        })

    },
    // 失去焦点事件
    onEditorBlur(quill) {},
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      // 移除禁用编辑器的逻辑，或者根据实际情况调整 this.isEdit 的值
      // if (!this.isEdit) {
      //   quill.enable(false);
      // }
      console.log("editor ready!", quill);
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.form.content = html;
    },
  },
};
</script>
<style lang="scss" scoped>
.subPageMain {
  position: relative;
  padding-top: 25px;
  width: 1200px;
  min-height: 600px;
  margin: 30px auto;
  .noticeDetail_detail {
    background-color: #f5f6f8;
    margin: 16px auto;
    border-radius: 8px;
    .noticeDetail_head {
      padding: 25px 30px;
    }
    .noticeDetail_main {
      padding: 16px 30px 30px;
    }
  }
  .editContainer {
    position: relative;
    width: 1200px;
    min-height: 345px;
    min-height: auto;
    background-color: #f5f6f8;
    // background: #ffffff;
    margin: 16px auto 0;
    padding-bottom: 40px;
    border-radius: 8px;
    box-sizing: border-box;
    .edit_headTitle {
      position: relative;
      padding: 30px 34px 0;
      margin-bottom: 0;

      box-sizing: border-box;
    }
    .edit_main {
      padding: 20px 34px 0;
      .replyEdit {
        height: 170;
        .my-quill-editor {
          height: 80%; /* 这里设置为父容器高度的80%，根据实际情况调整 */
        }
        .ql-editor {
          height: 300px;
        }
      }
      .replyEditBtnGroup {
        margin-top: 16px;
        height: 36px;
        .replyBtn {
          float: right;
        }
      }
    }
  }
}
</style>
